<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{$config.sitetitle}|{$config.sitetitle2}</title>
<link rel="stylesheet" href="__TMPL__/jmobile/jquery.mobile-1.3.0.min.css" />
<script src="__TMPL__/jmobile/jquery.min.js"></script>
<script src="__TMPL__/jmobile/jquery.mobile-1.3.0.min.js"></script>
<script src="__TMPL__/jmobile/jquery.nicescroll.js"></script>
<script>
  $(document).ready(function() {
    $("html").niceScroll({  cursorwidth:4 });  // The document page (html)
  });
</script>
</head>
<body >
<style>
#pagecontent {
	text-align:center;
}

.gallerycontent a img {
	height:80px;
	width:80px;
	padding:3px;
	background-color:#222;
}

#prevbtn, #nextbtn {
	margin:10px 15px;
}
</style>
<php>$icon = array('','contact.png','news.png','events.png','athletics.png','maps.png');</php>
<!-- Home -->
<div data-role="page" class="home">
<div data-role="header">
		<a href="#" data-role="button" data-transition="slidefade" data-icon="back" class="ui-btn-left" data-theme="a" data-rel="back">返回</a>
		<h1>产品相册</h1>
		<a href="./" data-icon="home" data-iconpos="left" data-direction="reverse" class="ui-btn-right" data-ajax="false">主页</a>
	</div>
<div  id="pagecontent">
  <div class="gallerycontent">
    <volist name='list' id='vo' key='k'>
	<a href="#imgshow" data-transition="pop" data-rel="dialog" <eq name='k' value='1'>class="first"</eq>  <eq name='k' value='$count'>class="last"</eq>>
      <img src="__ROOT__{$vo.imgurl}" alt="{$vo.title}" width="80" height="80"/>
    </a>
	</volist>
  </div>
</div> <!--/content-->
</div>
<div data-role="dialog"  id="imgshow"  data-theme="a">
  <div data-role="header" data-theme="a">
    <div id="dialoghead"></div>
  </div><!-- /header -->
 
<div  data-theme="a">
  <center><div id="dialogcontent"></div></center>
</div>
 
<div data-role="footer">
  <center>
    <a href="#" id="prevbtn" data-role="button" data-iconpos="notext" data-icon="arrow-l">Previous</a>
    <a href="#" id="nextbtn" data-role="button" data-iconpos="notext" data-icon="arrow-r">Next</a>
  </center>
</div>
</div>
<script>
  $(document).ready(function() {
    $("html").niceScroll({  cursorwidth:4 });  // The document page (html)
  });
$('.gallerycontent img').bind('tap',function(event, ui){
var src = $(this).attr("src");
var alt = $(this).attr("alt");
$('#dialogcontent').empty().append('<a href="#gallerypage"><img src="' + src + '" style="width:100%; height:100%;"/></a>' );
$('#dialoghead').empty().append('<center><h2>' + alt + '</h2></center>' );
$(this).parent().addClass('selectedimg');
});

function gonext() {
var current = $('a.selectedimg');
if (current.hasClass('last')) {
	var next = $('a.first')
} else {
	var next = current.next();
}

var src = next.find('img').attr("src");
var alt = next.find('img').attr("alt");
next.addClass('selectedimg');
current.removeClass('selectedimg');
$('#dialogcontent').empty().append('<a href="#gallerypage"><img src="' + src + '" style="width:100%; height:100%;"/></a>' );
$('#dialoghead').empty().append('<center><h2>' + alt + '</h2></center>' );
}

function goprev() {
var current = $('a.selectedimg');
if (current.hasClass('first')) {
	var prev = $('a.last')
} else {
	var prev = current.prev();
}
var src = prev.find('img').attr("src");
var alt = prev.find('img').attr("alt");
prev.addClass('selectedimg');
current.removeClass('selectedimg');
$('#dialogcontent').empty().append('<a href="#gallerypage"><img src="' + src + '" style="width:100%; height:100%;"/></a>' );
$('#dialoghead').empty().append('<center><h2>' + alt + '</h2></center>' );
}

 $('#nextbtn').bind('tap',function(event, ui){
	gonext();
});

$('#imgshow').bind('swipeleft',function(event, ui){
	gonext();
});

$('#prevbtn').bind('tap',function(event, ui){
	goprev();
});

$('#imgshow').bind('swiperight',function(event, ui){
	goprev();
});

</script>

</body>
</html>
